/**
 * Created by 001 on 2017/11/8.
 */
//播放列表每一项的组件
import React from 'react'
import './musiclistItem.less'
import Pubsub from 'pubsub-js'

let MusiclistItem = React.createClass({
    getInitialState(){
        return {}
    },
    componentDidMount(){
    },
    //在部件销毁时候解绑事件
    componentWillUnMount(){
    },
    playMusic(musicItem){
        Pubsub.publish('PLAY_MUSIC', musicItem);    //发布事件,在root里监听事件
    },
    deleteMusic(musicItem, e){
        e.stopPropagation();
        Pubsub.publish('DELETE_MUSIC', musicItem);
    },
    render(){
        let musicItem = this.props.musicItem;
        return (
            <li onClick={this.playMusic.bind(this,musicItem)}
                className={`components-listitem row ${this.props.focus?"focus":""}`}>
                <p><strong>{musicItem.title}</strong> - {musicItem.artist}</p>
                <p onClick={this.deleteMusic.bind(this,musicItem)} className="-col-auto delete"></p>
            </li>
        );
    }
});

export default MusiclistItem;